<template>
	<view>
		<u-navbar placeholder fixed bgColor="#21B4F3">
			<view slot="left"></view>
			<view slot="center" style="font-size: 16px;color: #FFFFFF;">个人中心</view>
		</u-navbar>
		<view class="center">
			<view class="content d-p-40 d-flex d-col-top">
				<u-avatar size="120rpx" :src="$user.profile || '/static/image/photo.png'"></u-avatar>
				<view class="d-flex-1 d-p-l-40">
					<view class="d-font-36 d-p-t-10" style="font-weight: bold;">{{ $user.userName }}</view>
					<view class="d-font-24 d-m-t-30" style="color: #5D6672;">
						<text class="d-m-r-30">{{ $user.sex }}</text>
						<text>{{ $user.phone }}</text>
					</view>
					<view class="d-font-24 d-m-t-10" style="color: #5D6672;"><text>{{ $user.ssqymc }}</text></view>
					<view class="edit" @click="edit"><u--image src="/static/icon/icon-11.png" width="42rpx" height="42rpx"></u--image></view>
				</view>
			</view>
		</view>
		<u-gap height="110rpx" bgColor="#ffffff"></u-gap>

		<view class="d-p-30 d-font-30" style="color: #1F242A;">
			<!-- <view class="item d-flex d-p-30" @click="feedback">
				<u--image width="28rpx" height="28rpx" src="/static/icon/icon-12.png"></u--image>
				<text class="d-m-l-28 d-flex-1">问题反馈</text>
				<u-icon name="arrow-right" color="#CECECE"></u-icon>
			</view> -->
			<view class="item d-flex d-p-30" @click="about">
				<u--image width="28rpx" height="28rpx" src="/static/icon/icon-13.png"></u--image>
				<text class="d-m-l-28 d-flex-1">关于我们</text>
				<u-icon name="arrow-right" color="#CECECE"></u-icon>
			</view>
			<view class="item d-flex d-p-30" @click="update">
				<u--image width="28rpx" height="28rpx" src="/static/icon/icon-14.png"></u--image>
				<text class="d-m-l-28 d-flex-1">软件更新</text>
				<u-icon name="arrow-right" color="#CECECE"></u-icon>
			</view>
			<!-- <view class="item d-flex d-p-30">
				<u--image width="28rpx" height="28rpx" src="/static/icon/icon-15.png"></u--image>
				<text class="d-m-l-28 d-flex-1">分享</text>
				<u-icon name="arrow-right" color="#CECECE"></u-icon>
			</view> -->
			<view class="item d-flex d-p-30" @click="change">
				<u--image width="28rpx" height="28rpx" src="/static/icon/icon-16.png"></u--image>
				<text class="d-m-l-28 d-flex-1">修改密码</text>
				<u-icon name="arrow-right" color="#CECECE"></u-icon>
			</view>
			
			<view class="d-m-t-80 d-p-b-80">
				<u-button text="退出登录" @click="show.outLogin = true"></u-button>
			</view>
		</view>
		
		<u-modal
			:show="show.outLogin"
			showCancelButton
			@cancel="show.outLogin = false"
			@confirm="outLogin()"
			title="温馨提示"
			content="退出登录后需要重新登录,您确认要退出登录吗?"
		></u-modal>
	</view>
</template>

<script>
// #ifdef APP-PLUS
import APPUpdate from '@/uni_modules/zhouWei-APPUpdate/js_sdk/appUpdate';
// #endif
export default {
	data() {
		return {
			show: {
				outLogin: false
			}
		};
	},
	methods: {
		feedback() {
			uni.$u.route({
				url: '/pages/mine/feedback'
			});
		},
		edit() {
			uni.$u.route({
				url: '/pages/mine/edit'
			});
		},
		about() {
			uni.$u.route({
				url: '/pages/mine/about'
			});
		},
		change() {
			uni.$u.route({
				url: '/pages/mine/change'
			});
		},

		update() {
			// #ifdef APP-PLUS 
			// 检测更新
			uni.showLoading({ title:'检测中'})
			APPUpdate(true);
			// #endif
		},
		
		outLogin() {
			this.show.outLogin = false;
			uni.$u.toast('已成功退出登录');
			uni.$u.route({
				type: 'reLaunch',
				url: '/pages/login/login'
			});
		},
	}
};
</script>

<style lang="scss">
.center {
	height: 200rpx;
	background-color: #21b4f3;
	position: relative;
	.content {
		width: 690rpx;
		height: 264rpx;
		background: #fefffe;
		box-shadow: 0rpx 5rpx 10rpx rgba(230, 230, 230, 0.6);
		border-radius: 16rpx;
		position: absolute;
		left: 30rpx;
		right: 30rpx;
		margin: auto;
		box-sizing: border-box;
		top: 30rpx;
		.edit {
			position: absolute;
			right: 30rpx;
			top: 45rpx;
		}
	}
}
.item {
	box-shadow: 0rpx 5rpx 20rpx rgba(0, 0, 0, 0.05);
	border-radius: 10rpx;
	margin-bottom: 30rpx;
}
</style>
